<template>
  <div class="rule-con">
    <div class="left" :style="'height:' + menuHeight + 'px'">
      <left-menu ref="lefeMenu" @clickModel="callback" :modelId="modelId" :type="1"></left-menu>
    </div>
    <div class="right">
      <div class="right-head">
        <div class="h-left">
          <el-select
            class="box1"
            v-model="typeData"
            clearable
            @change="updateList"
            @clear="updateList"
            placeholder="所有等级"
          >
            <el-option v-for="item in levelList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
          </el-select>
          <el-input
            class="box2"
            v-model="searchTxt"
            @keyup.enter.native="updateList"
            clearable
            @clear="updateList"
            placeholder="输入故障代码或名称查找"
          ></el-input>
        </div>
        <div class="h-right">
          <el-button
            type="primary"
            v-if="checkPermission('maintenanceApp:warningRule:add')"
            @click="$router.push({ name: 'addRule', query: { modelId: modelId, title: '新增报警规则' } })"
            >新增</el-button
          >
          <el-button class="btn" v-if="checkPermission('maintenanceApp:warningRule:notice')" @click="settingNotice"
            >报警通知设置</el-button
          >
        </div>
      </div>
      <div class="right-content">
        <list-table
          ref="ruleList"
          v-if="showTable"
          :listUrl="'maintenance/getAlarmRuleList'"
          :useOrder="true"
          :usePage="true"
          :maxHeight="tableHeight"
          :rowClick="{ callback: '' }"
          :columnName="columnNames"
          :expanedParam="expanedParam"
        >
          <template v-slot:actionButton>
            <el-table-column label="操作" align="left" width="150">
              <template slot-scope="scope">
                <div class="buttons">
                  <span
                    class="btn"
                    v-if="checkPermission('maintenanceApp:warningRule:modify')"
                    style="margin-left: 10px"
                    @click="modifyData(scope.row)"
                    >修改</span
                  >
                  <span
                    class="btn"
                    v-if="checkPermission('maintenanceApp:warningRule:modify')"
                    style="margin-left: 10px; color: red"
                    @click="deleteData(scope.row)"
                    >删除</span
                  >
                </div>
              </template>
            </el-table-column>
          </template>
        </list-table>
      </div>
    </div>
  </div>
</template>
<script>
import leftMenu from './util/leftMenu.vue';
import ListTable from '../../components/ListTable.vue';
import checkBtnPermission from '@/utils/checkBtnPermission';
import { deleteRule } from '../../api/rule';
export default {
  components: { leftMenu, ListTable },
  name: 'warningRule',
  data() {
    return {
      tableHeight: 0, // 表格高度
      menuHeight: 0, // 菜单高度
      modelId: 0, // 物模型ID
      levelList: [
        { label: '一级', value: 1 },
        { label: '二级', value: 2 },
        { label: '三级', value: 3 },
        { label: '四级', value: 4 },
        { label: '五级', value: 5 }
      ],
      typeData: '', // 等级
      searchTxt: '', // 搜索
      showTable: false, // 是佛加载列表
      columnNames: {
        errorCode: '故障代码',
        errorName: '故障名称',
        grade: {
          type: 'level',
          name: '故障等级'
        },
        errorDesc: {
          name: '故障描述',
          useTip: true
        }
      }, // 表格展示字段
      expanedParam: {} // 表格参数
    };
  },
  created() {
    if (this.$route.query.modelId) this.modelId = this.$route.query.modelId;
  },
  mounted() {
    if (this.$route.query.modelId) this.modelId = this.$route.query.modelId;
    this.getContentHeight();
  },
  methods: {
    // 高度
    getContentHeight() {
      const main = document.querySelector('.main');
      const mainHeight = main ? main.getBoundingClientRect().height : 0;
      const title = document.querySelector('.page-title');
      const titleHeight = title ? title.getBoundingClientRect().height : 0;
      this.tableHeight = mainHeight - titleHeight - 76 - 45;
      this.menuHeight = mainHeight - titleHeight - 50;
    },
    // 报警通知设置
    settingNotice() {
      this.$router.push({ name: 'noticeSet' });
    },
    // 选择物模型
    callback(res) {
      this.modelId = res.id;
      this.expanedParam.modelId = res.id;
      this.showTable = true;
      this.$nextTick(res => {
        this.$refs.ruleList.getListData();
      });
    },
    // 检查
    checkPermission(name) {
      return checkBtnPermission(name);
    },
    // 修改
    modifyData(row) {
      row.title = '修改报警规则';
      this.$router.push({ name: 'addRule', query: row });
    },
    // 删除
    deleteData(row) {
      this.$confirm('此操作将永久删除该规则, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteRule({ id: row.id }).then(res => {
            this.$message({
              type: 'success',
              message: '操作成功'
            });
            this.$nextTick(res => {
              this.$refs.ruleList.getListData();
              this.$refs.lefeMenu.updateList();
            });
          });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
    },
    // 更新列表
    updateList() {
      this.expanedParam = {
        grade: this.typeData,
        keyword: this.searchTxt,
        modelId: this.modelId
      };
      this.$nextTick(res => {
        this.$refs.ruleList.getListData();
      });
    },
    // 启用/停用
    openState(state) {
      let text = state === 1 ? '是否停用?' : '是否启用?';
      this.$confirm(text, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {})
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.rule-con {
  display: flex;
  .left {
    width: 283px;
  }
  .right {
    width: calc(100% - 300px);
    .right-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px;
      .box1 {
        width: 200px;
      }
      .box2 {
        width: 300px;
        margin-left: 12px;
      }
      .h-right {
        color: #3378ff;
      }
    }
    .right-content {
      padding: 0px 20px 0px 20px;
      .buttons {
        display: flex;
        .btn {
          color: #3378ff;
          font-size: 14px;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
